<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0">
    <title>商品管理 - 钢域云贸</title>
    <link rel="icon" href="/uploads/logo.png" type="image/x-icon"/>
    <link rel="shortcut icon" href="/uploads/logo.png" type="image/x-icon"/>
    <link rel="stylesheet" href="/css/bootstrap.min.css" type="text/css" media="all"/>
    <link rel="stylesheet" type="text/css" href="/css/public.css"/>
    <link rel="stylesheet" type="text/css" href="/css/style.css"/>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100">
<!-- 公共头部 -->
<th:block th:replace="~{/header.html}"></th:block>
<th:block th:if="${session.user == null or session.user.role != 'SUPPLIER'}">
    <div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 mb-6">
        <p>请以供应商身份登录！<a th:href="@{/login}" class="text-blue-600 hover:underline">立即登录</a></p>
    </div>
</th:block>
<!-- Main Content -->
<main class="container mx-auto my-12">

    <!-- 表单区域 -->
    <form th:action="${product.id != null} ? @{/supplier/product/update} : @{/supplier/product/add}"
          method="post"
          enctype="multipart/form-data"
          th:object="${product}"
          class="bg-white p-8 rounded-lg shadow-md space-y-6">
        <input type="hidden" th:field="*{id}" />
        <input type="hidden" name="_method" th:value="${product.id != null} ? 'PUT' : 'POST'" />
        <div>
            <label for="name" class="block text-gray-700 mb-2 font-semibold">商品名称</label>
            <input type="text" id="name" th:field="*{name}" placeholder="请输入商品名称" required
                   class="border border-gray-300 rounded-lg w-full p-3 focus:border-blue-500 focus:ring focus:ring-blue-200">
        </div>

        <!-- 商品分类 -->
        <div>
<!--            <label for="categoryId" class="block text-gray-700 mb-2 font-semibold">商品分类</label>-->
            <!-- 商品分类 -->
            <select id="category" name="categoryId" class="border border-gray-300 rounded-lg px-3 py-2 w-full focus:outline-none focus:ring-2 focus:ring-blue-300" required>
                <option th:each="category : ${categories}"
                        th:value="${category.id}"
                        th:text="${category.name}"
                        th:selected="${category.id} == ${product?.categoryId}">
                </option>
            </select>
        </div>

        <!-- 规格 -->
        <div>
            <label for="specification" class="block text-gray-700 mb-2 font-semibold">规格</label>
            <input type="text" id="specification" th:field="*{specification}" placeholder="请输入规格"
                   class="border border-gray-300 rounded-lg w-full p-3 focus:border-blue-500 focus:ring focus:ring-blue-200">
        </div>

        <!-- 材质 -->
        <div>
            <label for="material" class="block text-gray-700 mb-2 font-semibold">材质</label>
            <input type="text" id="material" th:field="*{material}" placeholder="请输入材质"
                   class="border border-gray-300 rounded-lg w-full p-3 focus:border-blue-500 focus:ring focus:ring-blue-200">
        </div>

        <!-- 库存 -->
        <div>
            <label for="inventory" class="block text-gray-700 mb-2 font-semibold">库存</label>
            <input type="number" id="inventory" th:field="*{inventory}" placeholder="请输入库存数量" required
                   class="border border-gray-300 rounded-lg w-full p-3 focus:border-blue-500 focus:ring focus:ring-blue-200">
        </div>

        <!-- 价格 -->
        <div>
            <label for="price" class="block text-gray-700 mb-2 font-semibold">价格（元）</label>
            <input type="number" id="price" step="0.01" th:field="*{price}" placeholder="请输入价格" required
                   class="border border-gray-300 rounded-lg w-full p-3 focus:border-blue-500 focus:ring focus:ring-blue-200">
        </div>

        <!-- 材料报告 -->
        <div>
            <label for="materialReportFile" class="block text-gray-700 mb-2 font-semibold">材料报告（PDF）</label>
            <input type="file" id="materialReportFile" name="materialReportFile"
                   class="border border-gray-300 rounded-lg w-full p-3 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100">
        </div>

        <!-- 商品图片 -->
        <div>
            <label for="imageFile" class="block text-gray-700 mb-2 font-semibold">商品图片（可选 JPG/PNG）</label>
            <input type="file" id="imageFile" name="imageFile"
                   class="border border-gray-300 rounded-lg w-full p-3 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100">
        </div>

        <!-- 发货地址 -->
        <div>
            <label for="shippingAddress" class="block text-gray-700 mb-2 font-semibold">发货地址</label>
            <input type="text" id="shippingAddress" th:field="*{shippingAddress}" placeholder="请输入发货地址"
                   class="border border-gray-300 rounded-lg w-full p-3 focus:border-blue-500 focus:ring focus:ring-blue-200">
        </div>

        <!-- 发货区域 -->
        <div>
            <label for="shippingRegion" class="block text-gray-700 mb-2 font-semibold">发货区域</label>
            <select id="shippingRegion" th:field="*{shippingRegion}"
                    class="border border-gray-300 rounded-lg w-full p-3 focus:border-blue-500 focus:ring focus:ring-blue-200">
                <option value="">请选择发货区域</option>
                <option value="华北">华北</option>
                <option value="华东">华东</option>
                <option value="东北">东北</option>
            </select>
        </div>
        <!-- 按钮 -->
        <div class="flex justify-end space-x-4">
            <a th:href="@{/supplier/product}" class="px-4 py-2 bg-gray-300 text-gray-800 rounded-lg hover:bg-gray-400">取消</a>
            <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">保存</button>
        </div>
    </form>
</main>

<!-- 公共底部 -->
<th:block th:replace="~{/footer.html}"></th:block>

<script src="/js/jquery-latest.min.js"></script>
<script src="/js/popper.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
</body>
</html>
